<template>
  <div class="dropdown-demo">
    <div class="demo-header">
      <h2>下拉选择组件演示</h2>
      <p>支持单选和多选两种模式，可灵活切换</p>
      <div class="feature-tips">
        <div class="tip-item">
          <strong>单选模式：</strong>默认模式，选择一个选项后自动关闭下拉菜单
        </div>
        <div class="tip-item">
          <strong>多选模式：</strong
          >可以选择多个选项，提供全选/清空功能，点击选项不关闭菜单
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>单选模式</h3>
      <div class="form-group">
        <label>基础单选下拉：</label>
        <CustomDropdown
          v-model="singleSelected"
          :options="basicOptions"
          placeholder="请选择一个选项"
          @change="onSingleChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="singleSelected">{{
            getSingleLabel(singleSelected)
          }}</span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>

      <div class="form-group">
        <label>城市选择：</label>
        <CustomDropdown
          v-model="citySelected"
          :options="cityOptions"
          placeholder="请选择城市"
          @change="onCityChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="citySelected">{{
            getSingleLabel(citySelected, cityOptions)
          }}</span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>多选模式</h3>
      <div class="form-group">
        <label>兴趣爱好多选：</label>
        <CustomDropdown
          v-model="hobbySelected"
          :options="hobbyOptions"
          placeholder="请选择兴趣爱好"
          :multiple="true"
          @change="onHobbyChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="hobbySelected.length > 0">
            {{ getMultipleLabels(hobbySelected, hobbyOptions) }}
          </span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>

      <div class="form-group">
        <label>技能标签多选：</label>
        <CustomDropdown
          v-model="skillSelected"
          :options="skillOptions"
          placeholder="请选择技能标签"
          :multiple="true"
          @change="onSkillChange"
        />
        <div class="selected-values">
          <strong>已选择：</strong>
          <span v-if="skillSelected.length > 0">
            {{ getMultipleLabels(skillSelected, skillOptions) }}
          </span>
          <span v-else class="empty">暂无选择</span>
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>禁用状态</h3>
      <div class="form-row">
        <div class="form-group">
          <label>禁用单选：</label>
          <CustomDropdown
            v-model="disabledSingle"
            :options="basicOptions"
            placeholder="已禁用的单选"
            :disabled="true"
          />
        </div>

        <div class="form-group">
          <label>禁用多选：</label>
          <CustomDropdown
            v-model="disabledMultiple"
            :options="hobbyOptions"
            placeholder="已禁用的多选"
            :multiple="true"
            :disabled="true"
          />
        </div>
      </div>
    </div>

    <div class="demo-section">
      <h3>综合示例</h3>
      <div class="form-row">
        <div class="form-group">
          <label>部门选择（单选）：</label>
          <CustomDropdown
            v-model="departmentSelected"
            :options="departmentOptions"
            placeholder="请选择部门"
            @change="onDepartmentChange"
          />
        </div>

        <div class="form-group">
          <label>权限分配（多选）：</label>
          <CustomDropdown
            v-model="permissionSelected"
            :options="permissionOptions"
            placeholder="请选择权限"
            :multiple="true"
            @change="onPermissionChange"
          />
        </div>
      </div>

      <div class="result-panel">
        <h4>选择结果</h4>
        <div class="result-item">
          <strong>部门：</strong>
          <span class="result-value">
            {{
              departmentSelected
                ? getSingleLabel(departmentSelected, departmentOptions)
                : "未选择"
            }}
          </span>
        </div>
        <div class="result-item">
          <strong>权限：</strong>
          <span class="count-badge"
            >{{ permissionSelected.length }} 个权限</span
          >
          <div class="tag-list">
            <span v-for="value in permissionSelected" :key="value" class="tag">
              {{ getSingleLabel(value, permissionOptions) }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CustomDropdown from "@/components/form/dropdown.vue";

export default {
  name: "DropdownDemo",
  components: {
    CustomDropdown,
  },
  data() {
    return {
      // 单选值
      singleSelected: "",
      citySelected: "",
      departmentSelected: "",
      disabledSingle: "",

      // 多选值
      hobbySelected: [],
      skillSelected: [],
      permissionSelected: [],
      disabledMultiple: [],

      // 基础选项
      basicOptions: [
        { label: "选项一", value: "option1" },
        { label: "选项二", value: "option2" },
        { label: "选项三", value: "option3" },
        { label: "选项四", value: "option4" },
        { label: "选项五", value: "option5" },
      ],

      // 城市选项
      cityOptions: [
        { label: "北京", value: "beijing" },
        { label: "上海", value: "shanghai" },
        { label: "广州", value: "guangzhou" },
        { label: "深圳", value: "shenzhen" },
        { label: "杭州", value: "hangzhou" },
        { label: "南京", value: "nanjing" },
        { label: "武汉", value: "wuhan" },
        { label: "成都", value: "chengdu" },
      ],

      // 兴趣爱好选项
      hobbyOptions: [
        { label: "阅读", value: "reading" },
        { label: "音乐", value: "music" },
        { label: "电影", value: "movie" },
        { label: "运动", value: "sports" },
        { label: "旅游", value: "travel" },
        { label: "摄影", value: "photography" },
        { label: "绘画", value: "painting" },
        { label: "编程", value: "coding" },
      ],

      // 技能选项
      skillOptions: [
        { label: "JavaScript", value: "javascript" },
        { label: "Vue.js", value: "vue" },
        { label: "React", value: "react" },
        { label: "Node.js", value: "nodejs" },
        { label: "Python", value: "python" },
        { label: "Java", value: "java" },
        { label: "UI设计", value: "ui" },
        { label: "产品设计", value: "design" },
      ],

      // 部门选项
      departmentOptions: [
        { label: "技术部", value: "tech" },
        { label: "产品部", value: "product" },
        { label: "设计部", value: "design" },
        { label: "市场部", value: "marketing" },
        { label: "运营部", value: "operation" },
        { label: "人事部", value: "hr" },
      ],

      // 权限选项
      permissionOptions: [
        { label: "用户管理", value: "user_manage" },
        { label: "角色管理", value: "role_manage" },
        { label: "权限管理", value: "permission_manage" },
        { label: "系统配置", value: "system_config" },
        { label: "数据统计", value: "data_stats" },
        { label: "内容管理", value: "content_manage" },
        { label: "文件管理", value: "file_manage" },
        { label: "日志查看", value: "log_view" },
      ],
    };
  },
  methods: {
    // 单选变化事件
    onSingleChange(value) {},

    onCityChange(value) {},

    onDepartmentChange(value) {},

    // 多选变化事件
    onHobbyChange(values) {},

    onSkillChange(values) {},

    onPermissionChange(values) {},

    // 获取单选标签
    getSingleLabel(value, options = this.basicOptions) {
      const found = options.find((option) => option.value === value);
      return found ? found.label : value;
    },

    // 获取多选标签
    getMultipleLabels(values, options) {
      return values
        .map((value) => {
          const found = options.find((option) => option.value === value);
          return found ? found.label : value;
        })
        .join(", ");
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: #4b58dc;

.dropdown-demo {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;

  .demo-header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #2c3e50;
      margin-bottom: 10px;
      font-size: 28px;
      font-weight: 600;
    }

    p {
      color: #7f8c8d;
      font-size: 16px;
      margin: 0 0 20px 0;
    }

    .feature-tips {
      background: linear-gradient(
        135deg,
        rgba(75, 88, 220, 0.1),
        rgba(255, 255, 255, 0.8)
      );
      border: 1px solid rgba(75, 88, 220, 0.2);
      border-radius: 8px;
      padding: 20px;
      text-align: left;
      max-width: 800px;
      margin: 0 auto;

      .tip-item {
        margin-bottom: 10px;
        font-size: 14px;
        color: #606266;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          color: @primary-color;
          font-weight: 600;
        }
      }
    }
  }

  .demo-section {
    margin-bottom: 40px;
    background: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

    h3 {
      margin-top: 0;
      margin-bottom: 20px;
      color: @primary-color;
      font-size: 20px;
      font-weight: 600;
      border-bottom: 2px solid @primary-color;
      padding-bottom: 10px;
    }

    .form-group {
      margin-bottom: 25px;

      label {
        display: block;
        margin-bottom: 8px;
        font-weight: 500;
        color: #2c3e50;
        font-size: 14px;
      }

      .selected-values {
        margin-top: 10px;
        padding: 10px;
        background-color: #f8f9fa;
        border-radius: 4px;
        font-size: 14px;
        color: #495057;

        .empty {
          color: #6c757d;
          font-style: italic;
        }
      }
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 30px;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }

    .result-panel {
      margin-top: 30px;
      padding: 20px;
      background: linear-gradient(
        135deg,
        rgba(75, 88, 220, 0.1),
        rgba(255, 255, 255, 0.8)
      );
      border-radius: 8px;
      border: 1px solid rgba(75, 88, 220, 0.2);

      h4 {
        margin-top: 0;
        margin-bottom: 15px;
        color: @primary-color;
        font-size: 16px;
      }

      .result-item {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        strong {
          display: inline-block;
          min-width: 60px;
          color: #2c3e50;
          margin-right: 10px;
        }

        .result-value {
          color: @primary-color;
          font-weight: 500;
        }

        .count-badge {
          display: inline-block;
          background: rgba(75, 88, 220, 0.1);
          color: @primary-color;
          padding: 2px 8px;
          border-radius: 10px;
          font-size: 12px;
          font-weight: 500;
          margin-right: 10px;
        }

        .tag-list {
          display: block;
          margin-top: 5px;

          .tag {
            display: inline-block;
            background: linear-gradient(
              135deg,
              @primary-color,
              lighten(@primary-color, 20%)
            );
            color: #fff;
            padding: 4px 12px;
            border-radius: 15px;
            font-size: 12px;
            margin-right: 8px;
            margin-bottom: 5px;
            box-shadow: 0 2px 4px rgba(75, 88, 220, 0.3);
          }
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .dropdown-demo {
    padding: 15px;

    .demo-section {
      padding: 20px;

      .form-row {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
}
</style>
